<template>
  <f7-page>
    <f7-navbar :title="title"></f7-navbar>
    <f7-toolbar tabbar labels bottom-md>
      <f7-link tab-link :tab-link-active="activetab === 0" text="首页" icon-fa="home" icon-size="20" @click="checktab(0, '/home', '永顺县脱贫攻坚督查系统')"></f7-link>
      <f7-link tab-link :tab-link-active="activetab === 1" text="公示" icon-fa="newspaper-o" icon-size="20" @click="checktab(1, '/new', '公示')"></f7-link>
      <f7-link tab-link :tab-link-active="activetab === 2" text="我的" icon-fa="user-o" icon-size="20" @click="checktab(2, '/self', '我的')"></f7-link>
    </f7-toolbar>
    <f7-view class="index-content" url="/home" name="index" :animate="false" :restore-scroll-top-on-back="false"></f7-view>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7Toolbar, f7Link, f7Views, f7View } from 'framework7-vue'
import Vue from 'vue'
export default {
  components: {
    f7Page,
    f7Navbar,
    f7Toolbar,
    f7Link,
    f7Views,
    f7View
  },
  data() {
    return {
      title: "永顺县脱贫攻坚督查系统",
      activetab: 0
    }
  },
  created() {
    let goHome = false
    if (this.$root.backbutton) return
    this.$root.backbutton = true
    window.document.addEventListener('backbutton', () => {
      const backdrop = this.$$('.backdrop-in')
      if (backdrop.length > 0) {
        backdrop.click()
        return
      }
      if (this.$f7router.history.length > 1) {
        this.$f7router.back()
      } else {
        if (!goHome) {
          goHome = true
          this.$f7.toast.create({
            text: '再按一次退出',
            closeTimeout: 1000
          }).open()
          setTimeout(() => {
            goHome = false
          }, 3000)
          return
        }
        this.$f7.toast.close()
        setTimeout(function() {
          window.navigator.Backbutton.goHome()
        }, 200)
      }
    }, false)
  },
  methods: {
    checktab(tab, url, title) {
      if (this.activetab === tab) return
      this.activetab = tab
      this.title = title
      this.$root.$emit('destroy-index')
      this.$$('.index-content>.page-current').remove()
      this.$f7.views.index.router.navigate(url, { reloadAll: true })
    }
  }
}
</script>